<!--活动介绍-->
<template>
    <div class="page_introduce">
        <x-header></x-header>
        <main class="Site-content">
            <div class="content">
                <div class="title">行走到里约活动介绍</div>
                <span class="publish_info">发布时间：
                    <span>{{publish.time}}</span>
                    浏览次数：
                    <span>{{publish.number}}</span>
                </span>
                <p class="summary">
                    摘要：{{summary}}
                </p>
                <img src="../assets/images/icon_05.png" alt="" width="100%"/>
                <p>
                    <div class="caption">参与要求：</div>
                    <span> 注册万步荟会员，使用HeHa App计步</span>
                </p>
                <p>
                <div class="caption">活动规则：</div>
                <span>北京到里约的直线距离约15000公里，换算成步数约 2500万步。</span>
                <div>活动分五个赛段，以团队赛形式，每个赛段团队在指 定时间内完成指定的步数，不限人数，设置团队积分 排行榜和个人步数排行榜，每个赛段决出分站点团队 奖和个人奖；五个赛段结束后，根据总的积分排序和
                    个人总步数，决出总团队和总个人奖项。其中总个人 冠军将获得终极大奖——双人往返里约机票。
                </div>
                </p>
            </div>
            <div class="stage" v-for="item in competitions">
                <span>{{item.stage}}: {{item.range}}</span>
                <span>报名时间：{{item.signTime}}</span>
                <span>比赛时间：{{item.gameTime}}</span>
                <span>{{item.stepCounts}}</span>
            </div>
            <img @click="backToTop()" src="../assets/images/icon_07.png" alt="" width="102" class="aaaaa"/>
        </main>
        <x-footer></x-footer>
    </div>
</template>

<script>
    import xHeader from './common/header.vue'
    import xFooter from './common/footer.vue'

    export default {
        name: '',
        components: {
            xHeader,
            xFooter
        },
        data() {
            return {
                publish: {time: '2015-09-08 10:30', number: '243'},
                summary: '万步荟线上活动：行走到里约正在火热进行中',
                competitions: [
                    {
                        stage: '第一赛段',
                        range: '西域大漠行（北京—嘉峪关）',
                        signTime: '6月1日-6月5日',
                        gameTime: '6月6日-6月15日',
                        stepCounts: '1500公里,200万步'
                    },
                    {
                        stage: '第二赛段',
                        range: '丝绸之路（嘉峪关—伊斯兰堡）',
                        signTime: '6月16日-6月20日',
                        gameTime: '6月21日-6月30日',
                        stepCounts: '2250公里，350万步'
                    },
                ],
            }
        },
        created() {},

        methods: {
            backToTop() {
                document.body.scrollTop = 0
                document.documentElement.scrollTop = 0
            }
        },

    }
</script>

<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .page_introduce {
        .content {
            padding: 0 1.2rem 0 1rem;
            .title {
                height: 2.5rem;
                line-height: 2.5rem;
                text-align: center;
                font-size: 1.1rem;
                color: #000;
                border-bottom: 1px solid #C9C7BB;
            }
            .publish_info {
                color: #777;
            }
            .summary {
                font-size: .6rem;
                background: #fff;
                line-height: 2rem;
                color: #666;
                padding-left: 1rem;
                word-wrap: break-word ;
            }
            .caption {
                font-weight: bold;
            }
        }
        .stage {
            height: 7.8rem;
            background: #FDFEFD;
            line-height: 2rem;
            font-size: 1em;
            margin-top: .5rem;
            padding: 1rem 1rem;
            span {
                color: #777;
                display: block;
            }
            span:first-child {
                color: #000;
                display: inline-block;
                font-weight: bold;
            }

        }
        .aaaaa {
            position: absolute;
            top: 39rem;
            left: (calc(100% - 30rem))
        }

    }
</style>